<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1,minimum-scale=1"
    />
    <title>通用适配方案</title>
    <link rel="stylesheet" href="css/reset.min.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <header class="nav-wrapper">
      <nav class="nav">nav</nav>
    </header>
    <section class="content-wrapper">
      <div class="content"></div>
    </section>
    <div class="tabbar-wrapper">
      <div class="tabbar">tab</div>
    </div>
  </body>
</html>
<script>
  //   es6之前的做法，避免污染全局对象
  //     (function () {
  //       // 原理， 宽高使用rem单位，要计算 1 rem = ? px
  //       // width:50px  设计稿 750px
  //       // width:25px  设计稿 375px
  //       // 1 rem = viewport / radio px
  //       // radio 为一个认为指定的系数，目的是为了方便计算
  //       // 我们想要 1 rem = 40px
  //       // 那么 radio = viewport/40 = 18.75

  //       function setRem() {
  //         //定义radio系数
  //         let radio = 18.75;
  //         // 获取视口宽度
  //         let viewportWidth =
  //           window.innerWidth ||
  //           document.documentElement.clientWidth ||
  //           document.documentElement.getBoundingClientRect().width;
  //         let html = document.documentElement;
  //         html.style.fontSize = `${viewportWidth / radio}px`;
  //       }
  //       window.addEventListener("resize", setRem);
  //       setRem();
  //     })();

  // es6 块级作用域
  {
    ("use strict");

    const MAXWIDTH = 540,
      MINWIDTH = 320;

    // 获取设备的dpr
    let dpr = window.devicePixelRatio || 1,
      htmlEl = document.documentElement,
      viewportEl = document.querySelector("meta[name=viewport]");

    dpr = dpr > 3 ? 3 : dpr > 2 ? 2 : 1;
    let scale = 1 / dpr;

    // 设置viewport 内容
    let content = `width=device-width,initial-scale=${scale},user-scalable=no,maximum-scale=${scale},minimum-scale=${scale}`;

    if (viewportEl) {
      viewportEl.setAttribute("content", content);
    } else {
      viewportEl = document.createElement("meta");
      viewportEl.setAttribute("name", "viewport");
      viewportEl.setAttribute("content", content);
      htmlEl.appendChild(viewportEl);
    }

    htmlEl.setAttribute("data-dpr", dpr);
    htmlEl.setAttribute("MaxWidth", MAXWIDTH);
    htmlEl.setAttribute("MinWidth", MINWIDTH);

    function setRem() {
      //定义radio系数
      const RADIO = 18.75;

      // 获取视口宽度
      let viewportWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.documentElement.getBoundingClientRect().width;

      if (MAXWIDTH && viewportWidth / dpr > MAXWIDTH) {
        viewportWidth = MAXWIDTH * dpr;
        console.log(MAXWIDTH, viewportWidth);
        console.log("max");
      } else if (MINWIDTH && viewportWidth / dpr < MINWIDTH) {
        viewportWidth = MINWIDTH * dpr;
        console.log("min");
      }

      htmlEl.style.fontSize = `${viewportWidth / RADIO}px`;
    }
    window.addEventListener("resize", setRem);
    setRem();
  }
</script>
